<template>
    <div class="detail">
        <Navbar />
        <div class="top">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>商品详情</el-breadcrumb-item>
                <el-breadcrumb-item>{{goodInfo.name}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="order">
            <div class="left">
                <div class="top">
                    <image-zoomer class="phone" :src="goodObj.path"></image-zoomer>
                </div>
                <div class="bottom">
                    <swiper class="swiper inswiper" ref="mySwiper" :options="swiperOptions">
                        <swiper-slide v-for="(item,index) in lunbos" :key="item.id">
                            <img :src="item.path" alt="" @click="toPlay(item.id,index)"
                                :class="{active: currentIndex===index}">
                        </swiper-slide>
                        <div class="swiper-button-prev leftBnt" slot="pagination"></div>
                        <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
                        <div class="swiper-button-next rightBnt" slot="pagination"></div>
                        <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
                    </swiper>
                </div>

            </div>
            <div class="right">
                <h2>{{goodInfo.name}}</h2>
                <p>{{goodInfo.desc}}</p>
                <p><span>价格</span>
                    <span>￥</span>
                    <span>{{goodInfo.price}}</span>
                </p>
                <p><span> 服务说明</span>
                    <span><i class="el-icon-check"></i>满48包邮</span>
                    <span><i class="el-icon-check"></i> 由华为终端提供商品 发货开票及售后服务</span>
                </p>
                <p>
                <ul>
                    <span> 选择颜色</span>
                    <li @click="color = 0" :class="{colorActive:color == 0}">耀金黑</li>
                    <li @click="color = 1" :class="{colorActive:color == 1}">冰霜银</li>
                    <li @click="color = 2" :class="{colorActive:color == 2}">绮境森林</li>
                    <li @click="color = 3" :class="{colorActive:color == 3}">普罗旺斯</li>
                </ul>
                </p>
                <el-input-number v-model="num" @change="handleChange" :min="1" :max="goodInfo.stock_num" label="描述文字">
                </el-input-number>
                <div class="bnts">
                    <button @click="addShop(goodInfo.id)">加入购物车</button>
                    <button>立即下单</button>
                </div>
            </div>
        </div>
        <div class="introduce">
            <div class="aa" v-html="imgs" ref="buttom"></div>
        </div>
        <RightAside />
    </div>
</template>

<script>
// 引入头部导航栏组件
import Navbar from '../components/Navbar.vue'
// 引入侧边栏组件
// 引入放大镜
import ImageZoomer from "ht-image-zoomer"
// 引入侧边栏组件
import RightAside from '../components/RightAside.vue';
import { getClassify, getGood, addCart } from "@/assets/request";
// 引入swiper组件
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper"
// 引入swiper样式
import "swiper/css/swiper.css";
export default {
    name: "Detail",
    data() {
        return {
            // 选择商品颜色
            color: 0,
            // 选中下面小图
            currentIndex: 0,
            // 配置swiper
            swiperOptions: {
                slidesPerView: 5,
                // 分页器
                pagination: {
                    el: '.swiper-pagination',
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            },
            // 存放轮播图的数组
            lunbos: [],
            goodObj: "",
            // 单个商品的详细信息
            goodInfo: {},
            // 介绍页面中的图片
            imgs: "",
            num: 1
        }
    },
    components: {
        Swiper,
        SwiperSlide,
        ImageZoomer,
        RightAside,
        Navbar,
        // ClassifyList,
    },
    methods: {
        // 点击小图展示大图
        toPlay(id, index) {
            this.goodObj = this.lunbos.find(item => item.id === id)
            this.currentIndex = index;
        },
        // 点击加减，数量大小
        handleChange(value) {
            // console.log(value);
        },
        // 加入购物车
        async addShop(id) {
            // 发请求
            let goodRes = await addCart({
                goods_id: id,
                num: 1,
                project_id: 255
            })
            if (goodRes.status == 200) {
                this.$message({
                    message: '已加入购物车',
                    type: 'success',
                    duration: 800,
                });
            } else {
                this.$message({
                    message: '加入购物车失败',
                    type: 'warning',
                    duration: 1000,
                });
            }

        },
    },
    directives: {
        swiper: directive,
    },
    async mounted() {

        let classifyRes = await getClassify({
            project_id: 255,
        })
        // 找到单个商品的信息
        let id = "";
        if (localStorage.getItem("goodId")) {
            id = JSON.parse(localStorage.getItem('goodId'));
        } else {
            id = this.$route.params.id;
        }
        let goodRes = await getGood(id)
        localStorage.setItem('goodId', JSON.stringify(id))
        // console.log(goodRes);
        // 轮播图的数组
        this.lunbos = goodRes.data.result.s_goods_photos;
        // console.log(this.goodPrice);
        // 获取介绍页面中的图片
        this.goodInfo = goodRes.data.result;
        // console.log(this.goodInfo);
        this.imgs = this.goodInfo.rich_text,
            // console.log(this.imgs);
            this.goodObj = this.lunbos[0]
        // 缓存

        //解决图片有间隙的问题
        //  $nextTick页面渲染后进行这一步，更新数据或者什么
        this.$nextTick(() => {
            let imgs = this.$refs.buttom.querySelectorAll("img")
            imgs.forEach(item => {
                item.style.display = 'block'
            })
        })
    },
}

</script>

<style lang='scss' scoped>
@function vw($w) {
    @return ($w/1349) * 100+vw;
}

.detail {
    width: 100%;
    display: block;

    .top {
        padding: vw(25) 0 vw(25) vw(70);
    }

    .order {
        width: vw(1200);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        margin-bottom: vw(20);

        .left {
            width: vw(450);

            .top {
                width: 100%;

                // height: vw(790);
                .phone {
                    width: 100%;
                    height: vw(450);
                }
            }

            .bottom {
                width: vw(400);
                margin: 0 auto;
                // height: vw(72);
                position: relative;
                padding: 0 36px;

                .inswiper {
                    width: 100%;
                    position: initial;

                    img {
                        width: vw(70);
                        height: vw(70);
                        cursor: pointer;
                    }
                }



                .active {
                    border: 1px solid #000;

                }

            }
        }

        .right {
            width: vw(650);
            margin-top: vw(50);

            h2 {
                font-size: vw(25);
                font-family: "Helvetica Neue", Helvetica, Arial;
                font-weight: 400;
                margin-bottom: vw(10);
            }

            p:nth-of-type(1) {
                font-size: vw(14);
            }

            p:nth-of-type(2) {
                color: red;
                padding: vw(10) 0 vw(20) 0;

                span:nth-of-type(1) {
                    width: vw(80);
                    color: #000;
                    font-size: vw(14);
                    letter-spacing: 2em;
                }

                span:nth-of-type(2) {
                    font-size: vw(18);
                }

                span:nth-of-type(3) {
                    font-size: vw(22);
                    font-weight: 500;
                }
            }

            p:nth-of-type(3) {
                padding: vw(10) 0 vw(20) 0;

                span:nth-child(1) {
                    text-align: center;
                    width: vw(80);
                    color: #000;
                    font-size: vw(14);
                    padding-right: vw(24);
                }

                span:nth-child(2) {
                    margin-right: vw(12);
                }
            }

            p:nth-of-type(4) {
                padding: vw(10) 0 vw(20) 0;

                ul {
                    text-align: center;
                    color: #000;
                    font-size: vw(14);
                    display: flex;
                    align-items: center;

                    span {
                        margin-right: vw(24);
                        font-weight: 500;
                    }

                    li {
                        color: #4e4c4b;
                        font-size: vw(13);
                        padding: vw(4) vw(5);
                        border: 1px solid rgb(143, 139, 139);
                        margin-right: vw(12);
                        cursor: pointer;
                    }

                    .colorActive {
                        color: #CA151D;
                        border: 1px solid rgb(235, 118, 22)
                    }
                }


            }

            .bnts {
                margin-top: vw(30);

                button:nth-of-type(1) {
                    width: vw(170);
                    height: vw(46);
                    background-color: #FC600C;
                    border: none;
                    color: #fff;
                    font-weight: 500;
                    font-size: vw(18);
                    margin-right: vw(25);
                    cursor: pointer;
                }

                button:nth-of-type(2) {
                    width: vw(170);
                    height: vw(46);
                    background-color: #CA151D;
                    border: none;
                    color: #fff;
                    font-size: vw(18);
                    font-weight: 500;
                    cursor: pointer;
                }
            }
        }
    }
}
</style>

